<template>
  <view class="order-list">
    <!-- 订单卡片列表 -->
    <scroll-view 
	  scroll-y 
	  class="order-scroll"
	  lower-threshold="30"
	  @scrolltolower="scrolltolower"
	  v-if="orderList.length > 0"
	>
      <view 
        class="order-card"
        v-for="(order, index) in orderList" 
        :key="index"
      >
        <!-- 订单头部 -->
        <view class="order-header">
          <text class="order-no">订单号：{{ order.id }}</text>
          <text class="status">{{ order.status }}</text>
        </view>
        
        <!-- 收货地址 -->
        <view class="address-info">
          <view class="user">
            <text class="name">{{ order.address.name }}</text>
            <text class="phone">{{ order.address.phone }}</text>
          </view>
          <text class="address">{{ order.address.address }}</text>
        </view>
        
        <!-- 商品列表 -->
        <view class="goods-list">
          <view class="goods-header" @tap="toggleGoodsList(index)">
            <text>共{{ order.products.length }}件商品</text>
            <view class="toggle">
              <text>{{ order.isExpanded ? '收起' : '展开' }}</text>
              <text class="arrow" :class="{ expanded: order.isExpanded }">></text>
            </view>
          </view>
          
          <view class="goods-items" v-if="order.isExpanded">
            <view 
              class="goods-item"
              v-for="(item, goodsIndex) in order.products"
              :key="goodsIndex"
            >
              <image :src="item.image" class="goods-image" mode="aspectFill"/>
              <view class="goods-info">
                <view class="goods-name">{{ item.name }}</view>
                <view class="goods-desc">{{ item.description }}</view>
                <view class="goods-price">
                  <text class="current">¥{{ item.currentPrice }}</text>
				  <text class="unit">/{{ item.unit }}</text>
                  <text class="original">¥{{ item.originalPrice }}</text>
                  <text class="count">x{{ item.count }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 订单金额 -->
        <view class="order-amount">
          <view class="amount-item">
            <text>商品总额</text>
            <text>¥{{ order.totalPrice }}</text>
          </view>
          <view class="amount-item discount">
            <text>优惠金额</text>
            <text>-¥{{ order.totalDiscountAmount }}</text>
          </view>
          <view class="amount-item actual">
            <text>实付款</text>
            <text>¥{{ order.finalPrice }}</text>
          </view>
        </view>
        
        <!-- 底部操作按钮 -->
        <view class="order-footer">
          <button class="cancel-btn" @tap="cancelOrder(index)">取消订单</button>
          <button class="pay-btn" @tap="payOrder(index)">立即付款</button>
        </view>
      </view>
    </scroll-view>
  
	<view v-else class="noData">暂无数据</view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { WaitPaidOrderApi } from '../../utils/orderUtils'
import { UserUtils } from '../../utils/userUtils'

onMounted(() => {pageGet()})

// 分页数据
const page = ref({currentPage: 1, pageSize: 5, total: 0})
// 订单列表数据
const orderList = ref([])

// 上拉加载
const scrolltolower = () => {
	// 如果语句拿到所有数据，则不再去加载
	if (orderList.value.length >= page.value.total) return
	// 否则加载下一页数据
	page.value.currentPage += 1
	pageGet()
}

// 取消订单
const cancelOrder = (index) => {
  uni.showModal({
    title: '提示',
    content: '确定要取消订单吗？',
    success: (res) => {
      if (res.confirm) {
        WaitPaidOrderApi.cancelWaitPayOrder(orderList.value[index].id)
		.then(data => {
			// 重新加载本地用户历史订单
			UserUtils.reloadRecent((data) => {})
			orderList.value.splice(index, 1)
		})
      }
    }
  })
}

// 支付订单
const payOrder = (index) => {
  const order = orderList.value[index]
  // TODO: 调用支付接口
  WaitPaidOrderApi.payWaitPayOrder(order.id)
  .then(data => {
	  // 重新加载本地用户历史订单
	  UserUtils.reloadRecent((data) => {})
	  // 支付成功，跳转到待发货订单列表页面
	  uni.redirectTo({url: "/pages/order/unshipped"})
  })
}

// 分页获取数据
const pageGet = () => {
	WaitPaidOrderApi.getWaitPayOrders(page.value)
	.then(resultPage => {
		orderList.value = orderList.value.concat(resultPage.data)
		page.value.currentPage = resultPage.currentPage
		page.value.pageSize = resultPage.pageSize
		page.value.total = resultPage.total
	})
}

// 切换商品列表展开状态
const toggleGoodsList = (index) => {
  orderList.value[index].isExpanded = !orderList.value[index].isExpanded
}
</script>

<style lang="scss" scoped>
.noData {
	height: 100%;
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center;
}

.unit {
	font-size: 25rpx;
	color: #999;
	padding-right: 10rpx;
	padding-left: 5rpx;
}

.order-list {
  height: 88vh;
  background: #f7f7f7;
  padding: 20rpx;
  padding-bottom: 50rpx;
  
  .order-scroll {
    height: 100%;
  }
  
  .order-card {
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
    
    .order-header {
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #eee;
      
      .order-no {
        font-size: 24rpx;
        color: #666;
      }
      
      .status {
		padding-left: 5rpx;
        font-size: 25rpx;
        color: #ff5062;
      }
    }
    
    .address-info {
      padding: 20rpx 30rpx;
      border-bottom: 1rpx solid #eee;
      
      .user {
        margin-bottom: 10rpx;
        
        .name {
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
          margin-right: 20rpx;
        }
        
        .phone {
          font-size: 26rpx;
          color: #666;
        }
      }
      
      .address {
        font-size: 26rpx;
        color: #333;
        line-height: 1.4;
      }
    }
    
    .goods-list {
      .goods-header {
        padding: 20rpx 30rpx;
        border-bottom: 1rpx solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 26rpx;
        color: #333;
        
        .toggle {
          display: flex;
          align-items: center;
          color: #999;
          
          .arrow {
            margin-left: 10rpx;
            transition: transform 0.3s;
            transform: rotate(90deg);
            
            &.expanded {
              transform: rotate(-90deg);
            }
          }
        }
      }
      
      .goods-items {
        .goods-item {
          display: flex;
          padding: 20rpx 30rpx;
          border-bottom: 1rpx solid #eee;
          
          &:last-child {
            border-bottom: none;
          }
          
          .goods-image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 8rpx;
            margin-right: 20rpx;
          }
          
          .goods-info {
            flex: 1;
            
            .goods-name {
              font-size: 26rpx;
              color: #333;
              margin-bottom: 8rpx;
            }
            
            .goods-desc {
              font-size: 24rpx;
              color: #999;
              margin-bottom: 16rpx;
            }
            
            .goods-price {
              display: flex;
              align-items: center;
              
              .current {
                font-size: 30rpx;
                color: #ff5062;
                font-weight: 500;
              }
              
              .original {
                font-size: 24rpx;
                color: #999;
                text-decoration: line-through;
              }
              
              .count {
                font-size: 24rpx;
                color: #999;
                margin-left: auto;
              }
            }
          }
        }
      }
    }
    
    .order-amount {
      padding: 20rpx 30rpx;
      border-top: 1rpx solid #eee;
      
      .amount-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        font-size: 26rpx;
        color: #333;
        
        &.discount {
          color: #ff5062;
        }
        
        &.actual {
          margin-top: 20rpx;
          padding-top: 16rpx;
          border-top: 1rpx solid #eee;
          font-weight: 500;
          
          text:last-child {
            color: #ff5062;
            font-size: 30rpx;
          }
        }
      }
    }
    
    .order-footer {
      padding: 20rpx 30rpx;
      border-top: 1rpx solid #eee;
      display: flex;
      justify-content: flex-end;
      gap: 20rpx;
      
      button {
        min-width: 160rpx;
        height: 64rpx;
        line-height: 64rpx;
        font-size: 26rpx;
        border-radius: 32rpx;
        
        &.cancel-btn {
          color: #666;
          background: #f5f5f5;
        }
        
        &.pay-btn {
          color: #fff;
          background: linear-gradient(135deg, #ff6b81, #ff4757);
        }
        
        &:active {
          opacity: 0.9;
          transform: scale(0.98);
        }
      }
    }
  }
}
</style> 